<template>
  <div id="scene"></div>
</template>

<script>
import * as THREE from "three";
import { OrbitControls } from "three/examples/jsm/controls/OrbitControls.js";
import { LensflareElement, Lensflare } from "three/examples/jsm/objects/Lensflare";

let scene;
let camera;
let renderer;
let controls;
export default {
  data() {
    return {};
  },
  mounted() {
    this.init();
  },
  methods: {
    // 初始化
    init() {
      this.createScene(); // 创建场景
      this.createEarth();
      this.addSun(); // 创建光源
      this.createCamera(); // 创建相机
      this.createRender(); // 创建渲染器
      this.createControls(); // 创建控件对象
    },
    // 创建场景
    createScene() {
      scene = new THREE.Scene();
      scene.background = new THREE.TextureLoader().load("/texture-image/bg.jpg"); //单图背景贴图
    },
    createEarth() {
      const sGeo = new THREE.SphereGeometry(2, 50, 50);
      var loader = new THREE.TextureLoader();
      const sMaterial = new THREE.MeshPhongMaterial({
        map: loader.load("/texture-image/earth2/diffuse.jpg"),
        bumpMap: loader.load("/texture-image/earth2/bump.jpg"),
        specularMap: loader.load("/texture-image/earth2/specular.jpg")
      });
      this.earth = new THREE.Mesh(sGeo, sMaterial);
      scene.add(this.earth);

      //    加载云纹理
      const cloudTexture = new THREE.TextureLoader().load("/texture-image/earth2/clouds.png");
      // 初始化云几何
      const cloudGeometry = new THREE.SphereGeometry(2.01, 50, 50);
      // 初始化云材质
      const cloudMaterial = new THREE.MeshBasicMaterial({ map: cloudTexture, transparent: true });
      // 初始化云
      this.clouds = new THREE.Mesh(cloudGeometry, cloudMaterial);
      // 添加云到场景
      scene.add(this.clouds);
    },
    //添加太阳光晕
    addSun() {
      // 环境光
      const ambient = new THREE.AmbientLight(0x888888);
      scene.add(ambient);

      const pointLight = new THREE.PointLight(0xffffff, 1);
      pointLight.position.set(-6, 6, 3);
      scene.add(pointLight);
      var loader = new THREE.TextureLoader();
      var textureFlare0 = loader.load("/texture-image/earth1/lensflare0_alpha.png");
      var flareColor = new THREE.Color(0xffffff);
      var lensFlare = new Lensflare();
      lensFlare.addElement(new LensflareElement(textureFlare0, 350, 0, flareColor));
      pointLight.add(lensFlare);
    },
    // 创建相机
    createCamera() {
      const element = document.getElementById("scene");
      camera = new THREE.PerspectiveCamera(35, element.clientWidth / element.clientHeight, 0.1, 1000);
      camera.position.set(0, 10, 12); // 设置相机位置
      camera.lookAt(scene.position);
    },
    // 创建渲染器
    createRender() {
      const element = document.getElementById("scene");
      renderer = new THREE.WebGLRenderer({ antialias: true, alpha: true });
      renderer.setSize(element.clientWidth, element.clientHeight); // 设置渲染区域尺寸
      renderer.setClearColor(0x000000, 1); // 设置背景颜色
      element.appendChild(renderer.domElement);
      this.render(); // 渲染
    },
    render() {
      this.earth.rotation.y += 0.0005;
      this.clouds.rotation.y -= 0.001;
      renderer.render(scene, camera);
      requestAnimationFrame(this.render);
    },
    // 创建控件对象
    createControls() {
      controls = new OrbitControls(camera, renderer.domElement);
    }
  }
};
</script>
<style lang="scss" scoped>
#scene {
  width: 100%;
  height: 100%;
}
</style>
